<template>
  <div>
    <div v-show="isShow">全场清仓，全部{{money}}折</div>

    <ul>
      <li v-for="item in goods" :key="item.name">
        <div>{{ item.name }}</div>
        <div>{{ (item.price * item.discount).toFixed(2) }}</div>
        <div>折扣：{{ (item.discount * 100).toFixed(2) }}%</div>
      </li>
    </ul>

    <input type="text" v-model="money" />

    <button @click="btn">点击开启促销活动</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      goods: [
        {
          name: "mac电脑",
          price: "15000",
          discount: 1,
        },
        {
          name: "百事可乐",
          price: "3",
          discount: 1,
        },
        {
          name: "保温杯",
          price: "99",
          discount: 1,
        },
        {
          name: "保暖手套",
          price: "130",
          discount: 1,
        },
      ],
      isShow: false,
      money: "",
    };
  },

  methods: {
    btn() {
      this.isShow = !this.isShow;
      this.goods.forEach((item) => (item.discount = this.money / 10))
    },
  },
};
</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  width: 200px;
  height: 80px;
  padding: 10px 0 0 0;
  border: 2px solid #333;
}
</style>